Using the Viewport nodes

Use the Viewport nodes to set the size of a render target surface onto which content is projected.

Viewport 2D is a special node because it can render both 2D objects, such as Image, Page, Button 2D, and a Scene, which is a 3D object. When you create a new Kanzi Studio project, the project has a Viewport 2D with a Scene that contains a Camera and a Directional Light.

Creating a Viewport 2D node

To create a Viewport 2D node:

1. In the Project press Alt and right-click a 2D node where you want to create a Viewport 2D node and select Viewport 2D.
   Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
2. Add content to the Viewport 2D node you created.
   For example:
   • In the Project press Alt and right-click the Viewport 2D and select Scene.
     Kanzi Studio creates a Scene that contains a Camera and a Directional Light.
   • In the Project press Alt and right-click Prefabs, select Scene, and drag that Scene to the Viewport 2D node.
     Kanzi Studio instantiates the Scene as a prefab in the Viewport 2D node.

Controlling how Kanzi renders a Viewport 2D node

You can control how Kanzi renders a Viewport 2D node with the Foreground Hint property:

• None tells Kanzi to render the background brush after rendering the Viewport 2D node. Use it when the content of the Viewport 2D node is opaque.
• Translucent tells Kanzi to render the background brush before the content of the Viewport 2D node. Use it when the content in the Viewport 2D node is alpha blended.
• Occluding tells Kanzi not to render the background brush. Use it when the entire Viewport 2D node is filled with 3D content.

Setting the appearance of a Viewport 2D node

You can control how Kanzi renders a Viewport 2D node. See Controlling how Kanzi renders a Viewport 2D node.

To set the appearance of 2D nodes:

• You can fill 2D nodes with a solid color, a texture, or a material. See Adjusting the appearance of 2D nodes.
• You can rotate a 2D node around all three axes to create a 3D perspective effect. See Creating a 3D perspective effect for 2D nodes.
• You can apply custom rendering to 2D nodes to create post-processing effects. See Applying custom rendering to 2D nodes.

Using the Viewport 2D node in the API

To create a Viewport 2D node, attach it to the RootPage, and add to it either a Scene or 2D content:

// Create a Viewport 2D named Viewport 2D and add it to the RootPage.
Viewport2DSharedPtr viewport2d = Viewport2D::create(domain, "Viewport 2D");
rootNode->addChild(viewport2d);

// To render 3D nodes in a Viewport 2D you need to add a Scene to the Viewport 2D.
// Create a Scene named Scene and add it to the Viewport 2D.
SceneSharedPtr sceneNode = Scene::create(domain, "Scene for 3D objects");
viewport2d->setScene(sceneNode);

// Create a Camera named Camera and add it to the Scene.
CameraSharedPtr camera = Camera::create(domain, "Camera");
sceneNode->addChild(camera);

// Create a Point Light named Point light and add it to the Scene.
LightSharedPtr light = Light::createPoint(domain, "Point light");
sceneNode->addChild(light);

// Create a Box mesh named Box and add it to the Scene.
Model3DSharedPtr box = Model3D::createCube(domain, "Box", 1.0f, ThemeBlue);
sceneNode->addChild(box);

For details, see the Viewport2D class in the API reference.

See also

Using the Scene node

Preview

Using prefabs

Material types and materials

Creating textured materials

Open topic with navigation